<template>
  <ga-modal
    v-model:visible="visible"
    title-align="start"
    :width="600"
    @close="handleCancel(formRef)"
  >
    <template #title>{{ curId ? "编辑" : "创建" }}</template>
    <ga-spin style="width: 100%" :loading="loading">
      <ga-form ref="formRef" :model="formData">
        <ga-form-item
          field="osName"
          label="名称"
          label-col-flex="70px"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
        >
          <ga-input v-model="formData.osName" placeholder="请输入名称" />
        </ga-form-item>
        <ga-form-item
          field="osType"
          label="操作类型"
          label-col-flex="70px"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
        >
          <ga-select v-model="formData.osType" placeholder="选择操作类型">
            <ga-option
              v-for="(item, idx) in osList"
              :key="idx"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </ga-select>
        </ga-form-item>
        <ga-form-item
          field="version"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
          label="版本"
          label-col-flex="70px"
        >
          <ga-input v-model="formData.version" placeholder="请输入版本" />
        </ga-form-item>
        <ga-form-item
          field="arch"
          :rules="[RULE.NOT_NULL]"
          :validate-trigger="['change', 'input']"
          label="架构"
          label-col-flex="70px"
        >
          <ga-select v-model="formData.arch" placeholder="选择架构">
            <ga-option
              v-for="(item, idx) in archList"
              :key="idx"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </ga-select>
        </ga-form-item>
        <ga-form-item field="description" label="备注" label-col-flex="70px">
          <ga-textarea v-model="formData.description" placeholder="请输入内容" />
        </ga-form-item>
      </ga-form>
    </ga-spin>
    <template #footer>
      <ga-button @click="visible = false">取消</ga-button>
      <ga-button type="primary" @click="handleOk">确定</ga-button>
    </template>
  </ga-modal>
</template>

<script setup>
import { ref, defineEmits, reactive } from "vue";
import {
  editOperatingSystem,
  getOperatingSystemDetail,
  createOperatingSystem,
  getTemplateList,
} from "@/api/operatingSystem.ts";
import { byDictToList } from "@/api/dataDictionary.ts";
import { Message } from "@garco-design/web-vue";
import { RULE } from "@/constant/validators";
import useLoading from "@/hooks/loading";

const { loading, setLoading } = useLoading(false);
const formRef = ref(null);
const archList = ref([]);
const osList = ref([]);
const formData = reactive({
  osName: "",
  version: "",
  arch: "",
  osType: "",
  description: "",
});

const visible = ref(false);
const curId = ref("");
const info = ref({});
// 获取详情
const fetchDetailData = async () => {
  try {
    const { data } = await getOperatingSystemDetail(curId.value);
    info.value = data;
  } catch (err) {
    console.log(err);
  }
};
// 获取fetchArchList方法
const fetchArchList = async () => {
  try {
    const { data } = await byDictToList({ dictType: "os_arch", limit: -1 });
    archList.value = data?.items || [];
  } catch (error) {
    console.log(error);
  }
};
const open = async (record) => {
  setLoading(true);
  visible.value = true;
  fetchArchList();
  fetchTypeData();
  if (record && record?.id) {
    curId.value = record.id;
    await fetchDetailData();
    Object.keys(formData).forEach((item) => {
      formData[item] = info.value[item];
    });
  }
};
// 获取操作类型,架构类型列表
const fetchTypeData = async () => {
  try {
    const { data } = await byDictToList({ dictType: "os_type", limit: -1 });
    osList.value = data?.items || [];
  } finally {
    setLoading(false);
  }
};
// 保存
const emits = defineEmits(["fetchData"]);
const handleOk = async () => {
  const res = await formRef.value?.validate();
  if (!res) {
    try {
      const { code } = !curId.value
        ? await createOperatingSystem(formData)
        : await editOperatingSystem(curId.value, formData);
      if (code === 20000) Message.success("操作成功");
      emits("fetchData");
    } finally {
      visible.value = false;
    }
  }
};
const handleCancel = (formEl) => {
  curId.value = "";
  formEl.resetFields();
};
defineExpose({ open });
</script>

<style lang="scss" scoped></style>
